<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>表单提交</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" type="text/css" href="css/font.css">
		<link rel="stylesheet" type="text/css" href="css/madieer.css">
		<!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
		<script>eruda.init();</script> -->
		<script type="text/javascript" src="js/w_rem.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/vue@3.2.37.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"></script>
		<script type="text/javascript" src="js/wow.js"></script>
		<script type="text/javascript" src="js/jzt_common.js"></script>
		<script type="text/javascript" src="js/madieer.js"></script>
	</head>
	<body>
		<div id="form-app" v-cloak>
			<header-app></header-app>
			<div class="au-a3">
				<div class="au-a3-box wow fadeInUp animated" data-wow-delay="0.3s" data-wow-duration="1.5s"
					style="visibility: visible; animation-duration: 1.5s; animation-delay: 0.3s; animation-name: fadeInUp;">
					<div class="t1-a1" style="background:none;">
						<div class="t1-a2 i100 wow fadeInUp" data-wow-delay="0.3s" data-wow-duration="1.5s"
							style="visibility: hidden; animation-duration: 1s; animation-delay: 0.3s; animation-name: none;">
							<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220727/5d9ecea45467d2718d71ff37f12d7df1.jpg">
						</div>
						<div class="t1-a3 wow fadeInUp" data-wow-delay="0.4s" data-wow-duration="1.5s"
							style="visibility: hidden; animation-duration: 1s; animation-delay: 0.4s; animation-name: none;">
							在线留言</div>
						<div class="t1-a4 wow fadeInUp" data-wow-delay="0.5s" data-wow-duration="1.5s"
							style="visibility: hidden; animation-duration: 1s; animation-delay: 0.5s; animation-name: none;">
							填写以下表格与我们联系</div>
					</div>
					<div class="au-a3-form">
						<div class="au-a3-form-b1">
							<div>
								<p>姓名 Name <span>*</span></p>
								<input type="text" name="names" v-model="message.name">
							</div>
							<div>
								<p>邮箱 Email<span>*</span></p>
								<input type="text" name="email" v-model="message.email">
							</div>
						</div>
						<div class="au-a3-form-b2">
							<p>联系电话 Phone <span>*</span></p>
							<input type="text" name="mobile" v-model="message.phone">
						</div>
						<div class="au-a3-form-b2">
							<p>内容 Message <span>*</span></p>
							<textarea name="content" v-model="message.message"></textarea>
						</div>
						<div class="au-a3-form-sub clear">
							<input type="button" @click="submitMessage" value="提交留言">
							<img src="https://oss.lcweb01.cn/jzt/0971a11acea011ea9d6bfa163ea50a57/image/20220727/224466f3e13b9c6a67a9c85d5160ffe9.jpg" alt="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="components/headerApp.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.createApp({
				setup() {
					const message = Vue.ref({
						name: "",
						email: "",
						phone: "",
						message: ""
					});
					const submitMessage = () => {
						if (!message.value.name) {
							alert("请输入您的姓名");
						} else if (!message.value.email) {
							alert("请输入您的邮箱");
						} else if (!message.value.phone) {
							alert("请输入您的联系电话");
						} else if (!message.value.message) {
							alert("请输入您的内容");
						} else {
							$.post("https://jzt2.china9.cn/api/message/addMsg", {
								site_id: '6352679462e52a19f57c2d06',
								content: {
									"姓名": message.value.name,
									"邮箱地址": message.value.email,
									"联系电话": message.value.phone,
									"内容": message.value.message
								}
							}, function(res) {
								if (res.code === 200) {
									alert("提交成功");
									message.value = { name: "", email: "", phone: "", message: ""}
								} else {
									alert(res.msg);
									console.log(res.msg);
								}
							})
						}
					};
					Vue.onMounted(() => {})
					return {
						message,
						submitMessage
					}
				}
			}).component(
				// 注册的名字
				'HeaderApp',
				// 组件的实现
				headerApp
			).mount('#form-app')
		</script>
	</body>
</html>